<template>
  <template v-for="item in menu">
    <el-menu-item
      v-if="validateNull(item.children) && validRoles(item)"
      :index="getPath(item)"
      @click="open(item)"
      :key="item[labelKey]"
    >
      <i :class="item[iconKey]"></i>
      <template #title>
        <span :alt="item[pathKey]">{{item.label}}</span>
      </template>
    </el-menu-item>

    <el-sub-menu
      v-else-if="!validateNull(item.children)&&validRoles(item)"
      :index="getPath(item)"
      :key="item[labelKey]"
    >
      <template #title>
        <i :class="item.icon"></i>
        <span>{{item.label}}</span>
      </template>
      <template v-for="(child,cindex) in item.children" :key="cindex">
        <el-menu-item
          :index="getPath(child)"
          @click="open(child)"
          v-if="validateNull(child[childrenKey])"
        >
          <i :class="child[iconKey]"></i>
          <template #title>
            <span>{{child.label}}</span>
          </template>
        </el-menu-item>
        <sidebar-item v-else :menu="[child]" :key="cindex"></sidebar-item>
      </template>
    </el-sub-menu>
  </template>
</template>
<script>
import { validateIsNull } from 'utils/validate'
import { defineComponent, computed, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'sidebarItem',
  props: {
    menu: {
      type: Array,
    },
  },
  setup(props, context) {
    // context.emit('click','子组件传递给父组件')
    // const menu = props.menu
    // console.log(JSON.stringify(menu))
    const propsData = reactive({
      iconDefault: 'icon-caidan',
      label: 'label',
      path: 'path',
      icon: 'icon',
      children: 'children',
      query: 'query',
      href: 'href',
      meta: 'meta',
    })
    const store = useStore()
    const $route = useRouter()
    let labelKey = computed(() => propsData.label)
    let pathKey = computed(() => propsData.path)
    let queryKey = computed(() => propsData.query)
    let iconKey = computed(() => propsData.icon)
    let childrenKey = computed(() => propsData.children)
    let metaKey = computed(() => propsData.meta)
    let nowTagValue = computed(() => $route.path)
    let roles = computed(() => store.getters.roles)

    const getPath = (item) => {
      return item[pathKey.value] + ''
    }
    const getTitle = (item) => {
      return $route.$avueRouter.generateTitle(item[labelKey.value])
    }
    const validRoles = (item) => {
      item.meta = item.meta || {}
      return item.meta.roles ? item.meta.roles.includes(roles.value) : true
    }
    const validateNull = (val) => {
      return validateIsNull(val)
    }
    const open = (item) => {
      $route.push({
        path: item[pathKey.value],
        query: item[queryKey.value],
      })
    }
    return {
      labelKey,
      pathKey,
      queryKey,
      iconKey,
      childrenKey,
      metaKey,
      nowTagValue,
      roles,
      getPath,
      getTitle,
      validRoles,
      validateNull,
      open,
    }
  },
})
</script>

